<template>
  <div ref="div" style="height: 50px"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myEcharts: null,

      source: [
        { number: 10, time: 1 },
        { number: 30, time: 2 },
        { number: 40, time: 3 },
        { number: 5, time: 4 },
        { number: 20, time: 5 },
        { number: 40, time: 6 },
        { number: 7, time: 7 },
        { number: 60, time: 8 }
      ]
    }
  },
  methods: {
    // 绘制图像
    drawImg() {
      this.myEcharts.setOption({
        grid: { top: 0, left: 0, right: 0, bottom: 0 },
        dataset: { source: this.source },
        xAxis: { show: false },
        yAxis: { show: false },
        series: [
          {
            name: '',
            type: 'line',
            encode: {
              x: 'time',
              y: 'number'
            },
            itemStyle: {
              opacity: 0
            },
            lineStyle: {
              color: 'purple'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'purple' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      })
    }
  },
  mounted() {
    // 初始化echarts 实例
    this.myEcharts = echarts.init(this.$refs.div)
    this.drawImg()
  }
}
</script>

<style></style>
